<template>
  <vxe-modal
    id="selector"
    v-model="showDialog"
    :title="type_config.title"
    :destroy-on-close="true"
    width="800"
    height="400"
    min-width="500"
    min-height="400"
    show-footer
    show-zoom
    resize
    remember
    storage
  >
    <template #default>
      <el-form :inline="true" :model="search" size="mini" class="demo-form-inline">
        <el-form-item v-for="(item, index) in type_config.searchFields" :key="index" :label="item.cn"><el-input v-model="search[item.en]" /></el-form-item>
        <el-form-item><el-button type="primary" @click="doSearch">查询</el-button></el-form-item>
      </el-form>
      <vxe-grid
        ref="selectGrid"
        v-bind="gridOptions"
        border
        resizable
        show-overflow
        show-header-overflow
        highlight-hover-row
        highlight-current-row
        keep-source
        size="mini"
        auto-resize
        height="90%"
        :loading="loading"
        :pager-config="page"
        :data="list"
        :row-config="{'keyField':'id'}"
        @page-change="handleCurrentChange"
        @checkbox-change="selectChangeEvent"
        @checkbox-all="selectAllEvent"
        @radio-change="radioChangeEvent"
      />
    </template>
    <template #footer>
      <el-button type="success" size="mini" :disabled="confirmStatu" @click="selectConfirm">确定</el-button>
      <el-button type="info" size="mini" @click="close">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script>
import { getSelectorData } from '@/api/template/index'

export default {
  props: ['params'],
  data() {
    return {
      showDialog: false,
      empty: '暂无数据',
      gridOptions: { columns: [] },
      item: {},
      index: 1,
      headrow: {},
      list: [],
      type_config: {},
      search: {},
      select_rows: [],
      page: {
        currentPage: 1,
        pageSize: 50,
        total: 0,
        pageSizes: [5, 10, 20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      loading: true,
      confirmStatu: true
    }
  },
  watch: {
    select_rows() {
      if (this.select_rows.length > 0) {
        this.confirmStatu = false
      } else {
        this.confirmStatu = true
      }
    }
  },
  methods: {
    show(item, index, headrow, form) {
      this.showDialog = true
      this.item = item
      this.type_config = JSON.parse(item.type_config)
      this.index = index
      this.headrow = headrow
      this.form = form
      this.search = {}
      this.gridOptions.columns = []
      this.generateColumns(this.type_config.showFields)
      this.getList()
    },
    // 格式化列
    generateColumns(columns) {
      var selectColumn = {}
      selectColumn.width = 60
      if (this.type_config.is_multiple) {
        selectColumn.type = 'checkbox'
        this.gridOptions.checkboxConfig = { range: true, trigger: 'row', reserve: true }
      } else {
        selectColumn.type = 'radio'
        this.gridOptions.radioConfig = { trigger: 'row', reserve: true }
      }
      this.gridOptions.columns.push(selectColumn)
      columns.forEach((item, index) => {
        var column = {}
        column.field = item.en
        column.title = item.cn
        column.sortable = true
        this.gridOptions.columns.push(column)
      })
    },
    // 获取数据
    getList() {
      this.item.currentPage = this.page.currentPage
      this.item.pageSize = this.page.pageSize
      this.item.search = this.search
      this.loading = true
      // 自定义父数据条件
      var where = this.type_config.where
      if (where != null) {
        for (var i = 0; i < where.length; i++) {
          this.search[where[i].key] = this.headrow[where[i].value]
        }
      }
      // 表单填写数据条件
      var form_where = this.type_config.form_where
      if (form_where != null) {
        for (var j = 0; j < form_where.length; j++) {
          if (this.form[form_where[j].value] == null) {
            this.search[form_where[j].key] = ' '
          } else {
            this.search[form_where[j].key] = this.form[form_where[j].value]
          }
        }
      }
      getSelectorData(this.item)
        .then(res => {
          setTimeout(() => {
            this.loading = false
            this.list = res.page.list
            this.page.total = res.page.totalRow
          }, 1000)
        })
    },
    // 分页切换
    handleCurrentChange: function({ currentPage, pageSize }) {
      this.page.currentPage = currentPage
      this.page.pageSize = pageSize
      this.getList()
    },
    // 搜索
    doSearch() {
      this.page.currentPage = 1
      this.getList()
    },
    // 选中多行
    selectChangeEvent({ records }) {
      this.select_rows = records.concat(this.$refs.selectGrid.getCheckboxReserveRecords())
    },
    // 全选
    selectAllEvent({ records }) {
      this.select_rows = records.concat(this.$refs.selectGrid.getCheckboxReserveRecords())
    },
    // 选中单行
    radioChangeEvent({ row }) {
      var temp = []
      temp.push(this.$refs.selectGrid.getRadioRecord())
      this.select_rows = temp
    },
    // 确定
    selectConfirm() {
      this.close()
      this.$emit('confirm', { 'item': this.item, 'rows': this.select_rows })
    },
    close() {
      this.showDialog = false
    }
  }
}
</script>
